<div class="modal fade" id="msgModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    提醒
                </h4>
            </div>
            <div class="modal-body">
                您有新的订单，请注意查收！
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="document.getElementById('notice').pause()">关闭</button>
                <button type="button" id="msgModal_a" onclick="javascript:modalCloseAndShowNew();" class="btn btn-primary">查看新的订单</button>
            </div>
        </div>

    </div>

</div>

<audio id="notice" loop="loop">
    <source src="/sell/mp3/mSong.mp3" type="audio/mpeg" />
</audio>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc=" crossorigin="anonymous"></script>

<script>
    var websocket = null;
    if ('WebSocket' in  window) {
        websocket = new WebSocket("ws://127.0.0.1:8080/sell/webSocket/seller");
    } else {
        alert("该浏览器不支持websocket");
    }

    websocket.onopen = function(event) {
        console.log("建立websocket连接");
    }

    websocket.onclose = function(event) {
        console.log("websocket连接关闭");
    }

    websocket.onmessage = function(event) {
        console.log("收到消息：" + event.data);
        // 打开弹窗
        $('#msgModal_a').attr('href', '/sell/seller/order/detail?orderId=' + event.data);
        $('#msgModal').modal('show');

        // 播放音乐
        $('#notice').get(0).play();
    }

    websocket.onerror = function(event) {
        alert("websocket通信发生错误");
        console.error("websocket通信发生错误");
    }

    window.onbeforeunload = function() {
        if (null !== websocket) {
            websocket.close();
        }
    }

    function modalCloseAndShowNew() {
        document.getElementById('notice').pause();
        window.location = $('#msgModal_a').attr('href');
    }
</script>